<template>
  <div>
    <Form ref="form" :rules="formValidate" :label-width="140" :model="form">
      <Row wrap style="align-items: flex-start;margin-bottom:5px;display:block">
        <i-col :lg="12" :xs="24">
          <FormItem prop="image" :label-width="50">
            <div style="width:100%;margin-bottom:10px;height:140px;">
              <Upload :headers="uploadHeader" :on-success="handleSuccess" :action="downloadFileUrl" ref="upload"
                type="drag" :format="['jpg', 'jpeg', 'png']" :before-upload="beforeUpload" :show-upload-list="false">
                <img style="max-height: 120px;max-width: 100%;" :src="form.image" v-if="form.image" />

                <div style="padding: 25px 0" v-else>
                  <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                  <p>上传图片</p>
                </div>
              </Upload>
            </div>
          </FormItem>
          <FormItem label="编号" prop="sn">
            <Input v-model="form.sn" />
          </FormItem>
          <FormItem label="型号" prop="model">
            <Input v-model="form.model" />
          </FormItem>
          <FormItem label="供应商" prop="supplier">
            <Input v-model="form.supplier" />
          </FormItem>
          <FormItem label="风阻系数" prop="dragCoefficient">
            <InputNumber type="number" v-model.number="form.dragCoefficient" style="width:100%" />
          </FormItem>
          <FormItem label="迎风面积(m^2)" prop="frontalArea">
            <InputNumber type="number" v-model.number="form.frontalArea" style="width:100%" />
          </FormItem>
        </i-col>
        <i-col :lg="12" :xs="24">
          <FormItem label="整备质量(t)" prop="curbWeight">
            <InputNumber type="number" v-model.number="form.curbWeight" style="width:100%" />
          </FormItem>
          <FormItem label="半载质量(t)" prop="lvw">
            <InputNumber type="number" v-model.number="form.lvw" style="width:100%" />
          </FormItem>
          <FormItem label="满载质量(t)" prop="gvw">
            <InputNumber type="number" v-model.number="form.gvw" style="width:100%" />
          </FormItem>
          <FormItem label="轴距(m)" prop="wheelBase">
            <InputNumber type="number" v-model.number="form.wheelBase" style="width:100%" />
          </FormItem>
          <FormItem label="空载质心高度(mm)" prop="curbCentroidHeight">
            <InputNumber type="number" v-model.number="form.curbCentroidHeight" style="width:100%" />
          </FormItem>
          <FormItem label="半载质心高度(mm)" prop="lvwCentroidHeight">
            <InputNumber type="number" v-model.number="form.lvwCentroidHeight" style="width:100%" />
          </FormItem>
          <FormItem label="满载质心高度(mm)" prop="gvwCentroidHeight">
            <InputNumber type="number" v-model.number="form.gvwCentroidHeight" style="width:100%" />
          </FormItem>
          <FormItem label="油箱容积(L)" prop="tankVolume">
            <InputNumber type="number" v-model.number="form.tankVolume" style="width:100%" />
          </FormItem>
        </i-col>
      </Row>
    </Form>
    <Row class="code-row-bg" justify="end" type="flex" align="middle">
      其他人是否可见
      <i-switch v-model="form.isIndexShow" :true-value="1" :false-value="0" />
      其他人是否可用
      <i-switch v-model="form.otherCanUse" :true-value="1" :false-value="0" />
      <Button @click="cancel" style="margin-right:10px">取消</Button>
      <Button @click="save" type="primary">保存</Button>
    </Row>
  </div>
</template>
<script>
import { fileApi } from "@/api/file.js";
import { bodyApi } from "@/api/body";
import Cookies from "js-cookie";
import { TOKEN_KEY } from "@/lib/cookie";
export default {
  name: "BodyListForm",
  components: {},
  props: {
    // 是否为更新表单
    isUpdate: {
      type: Boolean,
      default: true
    },
    // 更新的表单数据对象
    updateData: {
      type: Object
    }
  },
  data() {
    return {
      // 表单数据
      form: {
        // 编号
        sn: null,
        // 型号
        model: null,
        // 供应商
        supplier: null,
        // 风阻系数
        dragCoefficient: null,
        // 迎风面积(m^2)
        frontalArea: null,
        // 整备质量(t)
        curbWeight: null,
        // 半载质量(t)
        lvw: null,
        // 满载质量(t)
        gvw: null,
        // 轴距(m)
        wheelBase: null,
        // 空载质心高度(mm)
        curbCentroidHeight: null,
        // 半载质心高度(mm)
        lvwCentroidHeight: null,
        // 满载质心高度(mm)
        gvwCentroidHeight: null,
        // 油箱容积(L)
        tankVolume: null,
        // 图片
        image: null,
        // 其他人是否可见
        isIndexShow: 1,
        otherCanUse: 1,
        // 创建者
        createUser: null
      },
      // 表单验证
      formValidate: {
        // 编号
        sn: [{ required: true, message: "请输入编号", trigger: "blur" }],
        // 型号
        model: [{ required: true, message: "请输入型号", trigger: "blur" }],

        // 风阻系数
        dragCoefficient: [
          {
            type: "number",
            required: true,
            message: "请输入风阻系数",
            trigger: "blur"
          },
          {
            type: "number",
            min: 0,
            max: 1,
            message: "请输入0到1的数字",
            trigger: "blur"
          }
        ],
        // 迎风面积(m^2)
        frontalArea: [
          {
            type: "number",
            required: true,
            message: "请输入迎风面积(m^2)",
            trigger: "blur"
          },
          {
            type: "number",
            min: 0,
            max: 100,
            message: "请输入0到100的数字",
            trigger: "blur"
          }
        ],
        lvw: [
          {
            type: "number",
            min: 0,
            max: 1000,
            message: "请输入0到1000的数字",
            trigger: "blur"
          }
        ],
        // 整备质量(t)
        curbWeight: [
          {
            type: "number",
            required: true,
            message: "请输入整备质量(t)",
            trigger: "blur"
          },
          {
            type: "number",
            min: 0,
            max: 1000,
            message: "请输入0到1000的数字",
            trigger: "blur"
          }
        ],
        // 满载质量(t)
        gvw: [
          {
            type: "number",
            required: true,
            message: "请输入满载质量(t)",
            trigger: "blur"
          },
          {
            type: "number",
            min: 0,
            max: 1000,
            message: "请输入0到1000的数字",
            trigger: "blur"
          }
        ],
        // 轴距(m)
        wheelBase: [
          {
            type: "number",
            required: true,
            message: "请输入轴距(m)",
            trigger: "blur"
          },
          {
            type: "number",
            min: 0,
            max: 100,
            message: "请输入0到100的数字",
            trigger: "blur"
          }
        ],
        // 空载质心高度(mm)
        curbCentroidHeight: [
          {
            type: "number",
            required: true,
            message: "请输入空载质心高度(mm)",
            trigger: "blur"
          },
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "blur"
          }
        ],
        lvwCentroidHeight: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "blur"
          }
        ],
        gvwCentroidHeight: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "blur"
          }
        ],
        tankVolume: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "blur"
          }
        ],
        // 图片
        image: [{ required: true, message: "请上传图片", trigger: "blur" }]
      }
    };
  },
  watch: {
    updateData: function(newValue, oldValue) {
      this.$refs["form"].resetFields();
      if (this.isUpdate) {
        for (let k in this.form) {
          this.$set(this.form, k, newValue[k]);
        }
        this.$set(this.form, "id", newValue["id"]);
      }
    },
    isUpdate: function(newValue, oldValue) {
      if (!newValue) {
        this.resetForm();
        this.$refs["form"].resetFields();
      }
    }
  },
  created() {
    this.downloadFileUrl = fileApi.fileUploadLocalUrl + "1";
  },
  mounted() {},
  computed: {
    uploadHeader: function() {
      let header = {
        "x-access-token": Cookies.get(TOKEN_KEY)
      };
      return header;
    },
    uploadUrl: function() {
      let baseUrl = fileApi.fileUploadLocalUrl;
      let url = baseUrl + 1;
      return url;
    },
    // 文件业务类型
    moduleTypes: function() {
      let array = [];
      for (let item in SERVICE_TYPE) {
        let obj = {};
        obj.desc = SERVICE_TYPE[item].desc;
        obj.value = SERVICE_TYPE[item].value;
        array.push(obj);
      }
      return array;
    },
    fileLocationTypes: function() {
      let array = [];
      for (const item in FILE_TYPE) {
        let obj = {};
        obj.desc = FILE_TYPE[item].desc;
        obj.value = FILE_TYPE[item].value;
        array.push(obj);
      }
      return array;
    }
  },
  methods: {
    // 上传成功钩子
    beforeUpload() {
      this.$refs.upload.clearFiles();
    },
    handleSuccess(res, file) {
      console.log(file);
      console.log(res);

      this.form.image = res.data.url;
    },
    beforeUpload() {
      this.$refs.upload.clearFiles();
    },
    // 上传失败钩子
    uploadError(e) {
      this.$Message.error("上传出错，请重试！");
      console.error(e);
      this.find();
    },
    // 上传失败钩子
    uploadError(e) {
      this.$Message.error("上传出错，请重试！");
      console.error(e);
      this.find();
    },
    cancel() {
      this.resetForm();
      this.$emit("on-form-close");
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.isUpdate) {
            this.update();
          } else {
            this.add();
          }
        } else {
          this.$Message.error("参数验证错误，请仔细填写表单数据!");
        }
      });
    },
    resetForm() {
      this.form = {
        // id
        id: null,
        // 编号
        sn: null,
        // 型号
        model: null,
        // 供应商
        supplier: null,
        // 风阻系数
        dragCoefficient: null,
        // 迎风面积(m^2)
        frontalArea: null,
        // 整备质量(t)
        curbWeight: null,
        // 半载质量(t)
        lvw: null,
        // 满载质量(t)
        gvw: null,
        // 轴距(m)
        wheelBase: null,
        // 空载质心高度(mm)
        curbCentroidHeight: null,
        // 半载质心高度(mm)
        lvwCentroidHeight: null,
        // 满载质心高度(mm)
        gvwCentroidHeight: null,
        // 油箱容积(L)
        tankVolume: null,
        // 图片
        image: null,
        isIndexShow: 1,
        otherCanUse: 1
      };
      this.$refs["form"].resetFields();
    },
    async add() {
      this.$Spin.show();
      let res = await bodyApi.addBody(this.form);
      this.$Message.success(res.msg);
      this.$Spin.hide();
      this.resetForm();
      this.$emit("on-form-close");
      this.$emit("on-resetData");
    },
    async update() {
      this.$Spin.show();
      let res = await bodyApi.updateBody(this.form);
      this.$Message.success(res.msg);
      this.$Spin.hide();
      this.resetForm();
      this.$emit("on-form-close");
      this.$emit("on-resetData");
    }
  }
};
</script>
<style>
.ivu-row {
  align-items: flex-start;
}

.ivu-switch {
  margin: 0 10px;
}

.ivu-upload {
  height: 140px;
}
</style>
